<template>

  <!--  <h2>账号管理</h2>-->
  <br>
  <div align="left">
    <div>
      账号:
      <vxe-input v-model="搜索_账号" placeholder="模糊搜索账号" @keypress.native.enter="搜索账号列表"  class="my-domain"></vxe-input>
      设备:
      <vxe-input v-model="搜索_设备" placeholder="搜索设备" @keypress.native.enter="搜索账号列表" class="my-domain"></vxe-input>
      多区:
      <inputselect v-model:value="搜索_多区" v-model:list="多区数组" @keypress.native.enter="搜索账号列表"></inputselect>
      标记:
      <inputselect v-model:value="搜索_标记" v-model:list="标记数组" @keypress.native.enter="搜索账号列表"></inputselect>
      分配:
      <inputselect v-model:value="搜索_分配" :list="[{label:'全部',number:0},{label:'已分配',number:0},{label:'未分配',number:0}]" @keypress.native.enter="搜索账号列表"></inputselect>
      <!--      <button type="button" class="vxe-button type&#45;&#45;button theme&#45;&#45;primary" @click="搜索账号列表">-->
      <!--        <span class="vxe-button&#45;&#45;content">搜索</span>-->
      <!--      </button>-->
    </div>

    <br/>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="刷新当前页" v-loading="加载中"><i class="layui-icon layui-icon-refresh"></i>刷新当前页</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="删除选中">(批量)删除选中</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="一键清空"><i class="layui-icon layui-icon-delete"></i>一键清空</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn" @click="恢复账号"><i class="layui-icon layui-icon-ok-circle"></i>恢复账号</button>
  </div>


  <vxe-pager background v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
             v-model:total="page.totalResult"
             :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
             @page-change='刷新数据({来自分页:true})'>
    <template #right>
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
    </template>
  </vxe-pager>

  <div>
    <!--    keep-source-->
    <vxe-table  border resizable show-overflow ref="xTable" :data="tableData"
                :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" size="small" :loading="加载中"
                @edit-closed="保存修改行" @edit-actived="记录编辑前"
                row-id="id"
    >
      <vxe-column type="checkbox" width="40"  ></vxe-column>
      <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
      <vxe-table-column field="设备名称2" title="设备名2" width="110px" sortable></vxe-table-column>
      <vxe-table-column field="账号标记" title="标记" width="100" sortable></vxe-table-column>
      <vxe-table-column field="账号" title="账号" width="120" sortable></vxe-table-column>
      <vxe-table-column field="密码" title="密码" width="100"></vxe-table-column>
      <vxe-table-column field="vip" title="vip" width="70" sortable></vxe-table-column>
      <vxe-table-column field="元宝" title="元宝" width="165" sortable>
        <template #header>
          元宝(合计:{{单页元宝数量}})
        </template>
      </vxe-table-column>

      <!--      <vxe-table-column field="账号状态" title="账号状态" width="110" sortable></vxe-table-column>-->
      <vxe-table-column field="已勾选多区数量" title="多区" width="110"  sortable>
        <template #default="{ row }" >
          <span>{{ row.已勾选多区数量 + "/" + row.多区总数量 }}</span>
          <vxe-button type="text" status="success" content="分配" @click="显示账号详情(row)"></vxe-button>
        </template>
      </vxe-table-column>
      <vxe-table-column field="账号状态" title="账号状态" width="100"></vxe-table-column>
      <vxe-table-column field="创建时间" title="创建时间" :formatter="formatTime"  width="175"></vxe-table-column>
      <vxe-table-column field="账号备注" title="备注" show-overflow ></vxe-table-column>
    </vxe-table>
  </div>

  <vxe-modal v-model="账号详情_显示中" width="660" show-footer :title="账号详情_显示中账号" :destroy-on-close='true' :mask-closable="true" >
    <xszhxqf v-model:账号="账号详情_显示中账号"></xszhxqf>
  </vxe-modal>

</template>

<script>
import fqxs from "../components/账号管理/分区管理";
import inputselect from "../components/输入搜索";
import showSelect from "../components/分配开关显示";
import xszhxqf from "../components/设备管理/显示账号下区服.vue";
import XEUtils from 'xe-utils'

export default {
  components: {fqxs, inputselect, showSelect, xszhxqf},
  data() {
    return {
      单页元宝数量:0,
      已勾选:[],
      搜索_账号: "",
      搜索_设备: "",
      搜索_多区: "",
      搜索_标记: "",
      搜索_分配: "",
      搜索_账号状态: "",
      存储搜索条件:{},
      账号详情_显示中: null,
      账号详情_显示中账号: null,
      加载中: true,
      多区数组: "",
      标记数组: "",
      分配数组: "",
      登录状态数组: "",
      page: {
        currentPage: 1,
        pageSize: 100,
        totalResult: 0,
      },

      tableData: [],
    };
  },
  methods: {
    批量操作消息提示: async function (message1, message2="") {
      const table = this.getSelectionEvent();
      if (!table.length) {
        this.$XModal.confirm({content: message1, status: 'question', maskClosable: true});
        return false;
      }
      if(message2){
        var state = await this.$XModal.confirm(message2)
        if (state == 'cancel' || state=='close') {
          return false;
        }
      }
      this.已勾选=table;
      return table;
    },
    formatTime ({ cellValue, row, column }) {
      return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },

    搜索账号列表: function () {
      var T = this
      T.page.currentPage = 1;
      var pageInfo = this.page;
      var 分配=T.搜索_分配;
      if(分配=='全部'){
        T.搜索_分配="";
      }else if(分配=='已分配'){
        T.搜索_分配=1
      }else if(分配=='未分配'){
        T.搜索_分配=2
      }
      var params = {
        账号: T.搜索_账号.trim(),
        设备名称: T.搜索_设备.trim(),
        区服名称: T.搜索_多区.trim(),
        账号标记: T.搜索_标记.trim(),
        账号开关: T.搜索_分配,
        账号状态: T.搜索_账号状态.trim(),
        第几页: pageInfo.currentPage,
        每页显示条数: pageInfo.pageSize
      }
      T.存储搜索条件=params
      T.tableData = [];
      T.已勾选=[]
      T.刷新数据(params);
    },
    显示账号详情: function (row) {
      this.账号详情_显示中账号 = row.账号;
      this.账号详情_显示中 = true;
    },

    focusEvent1() {
      this.$refs.xDown1.showPanel();
    },
    刷新数据:async function(params={}) {
      let T = this;
      if(params.来自分页){
        T.已勾选=[] //清空掉勾选
      }
      this.tableData = [];
      this.加载中 = true;
      let conditon=T.存储搜索条件
      this.$请求(
          "/recycle/rootnumber",
          {
            账号: conditon.账号,
            设备名称: conditon.设备名称,
            区服名称:  conditon.区服名称,
            账号标记:  conditon.账号标记,
            账号开关:  conditon.账号开关,
            账号状态:  conditon.账号状态,
            第几页: T.page.currentPage,
            每页显示条数: T.page.pageSize,
          },
          function (response) {
            T.加载中 = false;
            T.tableData = response.data.data;
            T.单页元宝数量= response.data.data.reduce(function (preValue, n) {
              return preValue + n.元宝
            }, 0);
            T.$refs.xTable.setCheckboxRow( T.已勾选,true)
            T.page.totalResult = response.data.total;
            //T.$XModal.message({content: "刷新成功", status: "success"});
          },
          function () {
          }
      );
    },
    editClosedEvent({row, column}) {
      console.log(`${column.property} : ${row[column.property]}`);
    },

    getSelectionEvent: function () {
      const $table = this.$refs.xTable.getCheckboxRecords();
      return $table;
    },
    获取选中的账号和指定字段(字段) {
      //   this.加载中 = true;
      const table = this.getSelectionEvent();
      let tab = [];
      for (var i = 0; i < table.length; i++) {
        tab.push({账号: table[i].账号, [字段]: table[i][字段]});
      }
      return tab;
    },
    刷新当前页:async function(){
      const T=this;
      T.刷新数据();
    },

    删除选中: async function () {
      const table = await this.批量操作消息提示('请勾选需要删除的账号', '您确定要删除吗？')
      if (!table) {
        return;
      }
      this.加载中 = true;
      const T = this;
      let tab = [];
      for (var i = 0; i < table.length; i++) {
        tab.push(table[i].账号);
      }
      this.$请求(
          "/permanent/deleted",
          {
            账号数组: JSON.stringify(tab),
          },
          function (response) {
            T.刷新数据();
            T.$XModal.alert({content: "success 永久删除成功", status: "success"});
          },
          function (response) {
            alert("出错啦");
          }
      );
    },
    一键清空: async function () {
      this.加载中 = true;
      const T = this;
      this.$请求(
          "/delAll/rootNumber",
          {},
          function (response) {
            T.加载中 = false;
            T.刷新数据();
            T.$XModal.alert({content: "一键清空成功", status: "success"});
          },
          function (response) {
            alert("出错啦");
          }
      );
    },
    恢复账号: async function () {
      const table = await this.批量操作消息提示('请勾选需要恢复的账号')
      if (!table) {
        return;
      }

      this.加载中 = true;
      const T = this;
      let tab = [];
      for (var i = 0; i < table.length; i++) {
        tab.push(table[i].账号);
      }
      this.$请求(
          "/restore/delete/allrootnumber",
          {
            账号数组: JSON.stringify(tab),
          },
          function (response) {
            T.刷新数据();
            T.$XModal.alert({content: "恢复账号成功", status: "success"});
          },
          function (response) {
            alert("出错啦");
          }
      );
    },

    获取下拉框数据:async function(){
      const T=this;
      this.$请求(
          '/get/select/qufu/name',
          {},
          function (obj) {
            if (!(obj && obj.data.code == 1)) {
              // T.$XModal.message({content: "获取下来框数据失败", status: "error"})
              console.log('获取下来框数据失败');
              return;
            }
            var data = obj.data.data;
            var arr = []
            var arr_标记 = []
            var arr_账号登录状态数组 = []
            data.areaNameArr.forEach(function (v) {
              if (v.区服名称) {
                arr.push({label:v.区服名称,number:v.number});
              }
            })
            data.markArr.forEach(function (v) {
              if (v.账号标记) {
                arr_标记.push({label:v.账号标记,number:v.number});
              }
            })
            data.loginState.forEach(function (v) {
              if (v.账号状态) {
                arr_账号登录状态数组.push({label:v.账号状态});
              }
            })
            T.多区数组 = arr;
            T.标记数组 = arr_标记;
            T.登录状态数组 = arr_账号登录状态数组;

          },
          function (err) {

          }
      )
    }

  },
  created() {
    this.刷新数据();
    this.获取下拉框数据()
  },

  watch:{
    // page:{//深度监听，可监听到对象、数组的变化
    //   handler(val, oldVal){
    //     console.log('深度监听，可监听到对象、数组的变化');
    //     console.log("page.currentPage: "+val.currentPage, oldVal.currentPage);
    //   },
    //   deep:true //true 深度监听
    // }
  }
};
</script>

<style scoped>

button {
  margin: 1px !important;
  border: 0px !important;
  /* padding: px !important; */
}

.my-domain{
  width: 170px;
}

</style>
